<template>
  <el-tabs v-loading="loading" type="border-card" class="tabs-1" @tab-click="SetOptionflag">
    <el-tab-pane v-for="item in TabsTop" :key="item.name" :label="item.name">
      <!-- 单位选择器 -->
      <el-card v-if="!optionflag">
        <CompanySelector />
      </el-card>
      <el-tabs tab-position="left" class="tabs-2" @tab-click="tabValueChange">
        <el-tab-pane v-for="tabpane in TabsLeft" :key="tabpane.name" :label="tabpane.name">
          <Table
            :table-zzjg="TableData"
            :optioncol="optionflag"
            :is-edit.sync="isEdit"
            :dialog-form-visible.sync="dialogFormVisible"
            :title.sync="title"
            :zzjg_form.sync="ZzjgForm"
            :page.sync="page"
            :total-count="totalCount"
          />
        </el-tab-pane>
      </el-tabs>
    </el-tab-pane>
    <!-- 添加人员信息 -->
    <el-button type="text" @click="handleAdd">添加人员</el-button>
    <el-dialog v-if="dialogFormVisible" :title="title" :visible.sync="dialogFormVisible">
      <Form
        :isedit="isEdit"
        :zzjg-form.sync="ZzjgForm"
        :optioncol="optionflag"
        :total-count="totalCount"
        :dialogformvisible.sync="dialogFormVisible"
      />
    </el-dialog>
  </el-tabs>
</template>
<script>
import '@/styles/el-tabs.scss'
import { getUsersInfo, getGroupNum } from '@/api/zzxt'
export default {
  name: 'Zzjg',
  components: {
    Table: () => import('./Table'),
    CompanySelector: () => import('@/components/Company/CompanySelector'),
    Form: () => import('./Form')
  },
  data: () => ({
    loading: false,
    BrowserCompany: { name: '其它支部' },
    TabsTop: [{ name: '本支部' }],
    TabsLeft: [{ id: '0', name: '支部委员' }],
    optionflag: true,
    TableData: [],
    ZzjgForm: [],
    isEdit: true,
    dialogFormVisible: false,
    title: '',
    page: { pageIndex: 0, pageSize: 10 },
    totalCount: 0,
    LeftIndex: '0',
    query_api: {
      conditionnum: '1',
      condition: ['labor'],
      value: ['!="无"'],
      pagenum: '',
      companyid: ''
    }
  }),
  watch: {
    page: {
      handler(val) {
        this.DxzInfoUpdate()
      },
      deep: true
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    // 用于刷新页面的初始数据
    refresh() {
      const page = this.page
      this.TabsTop = this.TabsTop.concat(this.BrowserCompany)
      getUsersInfo(Object.assign(this.query_api, { page })).then(data => {
        this.totalCount = data.totalCount
        this.TableData = data.list
      })
      getGroupNum().then(data => {
        this.TabsLeft = this.TabsLeft.concat(data)
      })
    },
    tabValueChange(tab) {
      this.LeftIndex = tab.index
      this.DxzInfoUpdate()
    },
    SetOptionflag(tab) {
      this.page = { pageIndex: 0, pageSize: 10 }
      if (tab.index === '0') this.optionflag = true
      else {
        this.optionflag = false
        this.query_api.companyid = this.$store.state.zzxt.BrowserId
      }
    },
    handleAdd() {
      this.dialogFormVisible = true
      this.title = '添加人员信息'
      this.isEdit = true
      this.ZzjgForm = {}
    },
    DxzInfoUpdate() {
      if (this.LeftIndex === '0') {
        this.query_api.condition = ['labor']
        this.query_api.value = ['!="无"']
        const page = this.page
        getUsersInfo(Object.assign(this.query_api, { page })).then(data => {
          console.log('Choose Zhiwei!', data)
          this.TableData = data.list
          this.totalCount = data.totalCount
        })
      } else {
        this.query_api.condition = ['groupnum']
        this.query_api.value = [this.LeftIndex]
        const page = this.page
        getUsersInfo(Object.assign(this.query_api, { page })).then(data => {
          console.log('Table changed!', data)
          this.TableData = data.list
          this.totalCount = data.totalCount
        })
      }
    }
  }
}
</script>
